<template>
  <el-card class="box-card">
    <div>接货</div>
    <el-divider></el-divider>
   <div class="form">
      <el-form  class="demo-ruleForm" label-width="220px">
        <el-form-item label="采购订单编号/接货订单编号:" prop="barCode">
          <el-cascader
              v-model="value"
              :options="options"
              @change="handleChange"
              filterable
              clearable
              :show-all-levels="false"></el-cascader>
        </el-form-item>
      </el-form>
      <el-button type="primary" icon="el-icon-plus" class="btm" @click="receiving">开始接货</el-button>
    </div>
  </el-card>
</template>

<script>
export default {
  data () {
    return {
      user: '',
      value: [],
      options: [],
      id: ''
    }
  },
  methods: {
    async getOptions () {
      const { data: result } = await this.$http.get('/receiving/getOptions')
      if (result.status !== 200) return this.$message.error('获取列表失败')
      this.options = result.data
      console.log(this.options)
    },
    handleChange (value) {
      // console.log(value);
      console.log(this.value)
    },
    async receiving () {
      this.id = this.value[1]
      console.log(this.id)
      const { data: result } = await this.$http.post('/receiving/addReceiving', { id: this.id, user: this.user })
      if (result.status !== 200) return this.$message.error('接货失败')
      this.$message.success('接货成功')
      this.value = ''
      this.getOptions()
    }
  },
  mounted () {
    this.getOptions()
    this.user = window.sessionStorage.getItem('token').substr(32)
  }
}
</script>

<style>
  .box-card{
    height: 95%;
    width: 95%;

  }
  .form{
    position: absolute;
    top: 40%;
    left: 40%;
    /* right: 20%; */
  }
  .btm{
    /* align-items: center; */
    left: 30%;
  }
</style>
